<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>黄广达主页</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
  *{
  margin: 0px;
  padding:0px;
  }
  body{
  text-align: center;
  background-color: white;
  }
  /*菜单栏*/
  .menu{
  width: 100%;
  background-color: black;
  display: inline-block;
  }
  .ul{
  display: inline-block;
  list-style-type:none;
  }
  .li{
  list-style: none;
  float: left;
  border: 1px solid #888;
  margin-left: 20px;
  margin-top: 7px;
  height: 40px;
  border-radius:5px;
  font-family:"华文行楷";
  }
    /*代表菜单栏的样式*/
 	a{
  color: #FFF;
  text-decoration: none;
  display:block;
  float: left; 
  padding:10px 20px 15px 20px;
 	}

 	/*控制两边按钮的*/
	.main{
  margin-top: 20px;
  width: 900px;
	height: 400px;
	margin: 0px auto;
	position: relative;
	overflow: hidden;
  	}
  	
  /*控制图片大小*/
  img{
  width: 900px;
  height: 400px;
	}
  /*字体大小*/
	.title1 {
  	margin-left: 50px;
  	margin-right: 50px;
   	display:block;
    float: left;
    font-family:"华文行楷";
 	}
	.title2{
	margin-top: 15px;
	margin-bottom: 20px;
	font-family:"华文行楷";
	font-size: 30px;
	}
  /*左右按钮*/
	.left{
  width: 50px;
	height: 100px;
	background: url("images/spirte.png") no-repeat left top;
	left: 0px;
	top: 150px;
	background-color: black;
	opacity: 0.4;
	position: absolute;
	filter:alpha(opacity=50);
	}
	.right{
	width: 50px;
	height: 100px;
	background: url("images/spirte.png") no-repeat right top;
	right: 0px;
	top: 150px;
	background-color: black;
	opacity: 0.4;
	position: absolute;
	filter:alpha(opacity=50);
  }
  
  /*图片的摆放大小*/
  .img{
	float: left;
	width: 320px;
	height: 150px;
	position: relative;
  }

</style> 

</head>
<body>
<div class="menu">
  <ul class="ul">
    <div class="li"><li><a href="main.html">首页</a></li></div>
    
    <div class="li"><li><a href="geren.html">个人资料</a></li></div>
    
    <div class="title1"><h3> GD阿達 </h3></div>
    
    <div class="li"><li><a href="sheng.html">大学生活</a></li></div>
    <div class="li"><li><a href="register.html">注册</a></li></div>
  </ul> 
</div>

<p class="title2" id="title2">我的大学生活</p>
<!-- 控制两边按钮的 -->
<div class="main" id="div1">
	<img src="images/01.jpg" alt="" id="img1">
    <div class="left" onclick="pre()"></div>
    <div class="right" onclick="next()"></div>
</div>

<script type="text/javascript">
	var arr=["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg","images/07.jpg","images/08.jpg","images/09.jpg","images/10.jpg","images/11.jpg","images/12.jpg"];
	var index=0;
	var time=null;
	function shownext(){
    	var img1=document.getElementById("img1");
    	img1.src=arr[index];
    	index++;
    	if(index==arr.length){
    		index=0;
    	}
    	time=window.setTimeout("shownext()",3000);
    }
    function pre(){
    	window.clearTimeout(time);
    	showpre();

    }
    function next(){
        window.clearTimeout(time);
        shownext();
    }
    function showpre(){
    	var img1=document.getElementById("img1");
    	img1.src=arr[index];
    	index--;
    	if(index<0){
    		index=arr.length-1;
    	}
    	time=window.setTimeout("showpre()",2000);
    }
    
    </script>
</body>
</html>